revision:
Syntax: $(selector).add(element,context)
The add() method adds elements to an existing group of elements. This method adds elements on the whole document, or just inside context elements if the context parameter is specified.
Parameters:
element : required. Specifies a selector expression, a jQuery object, one or more elements or an HTML snippet to be added to an existing group of elements
context : optional. Specifies the point in the document at which the selector expression should begin matching.
A p element.
Another p element.
A span element. A span element.
<div>
<h4>Welcome</h4>
<p class="p1">A p element.</p>
<p class="p1">Another p element.</p>
<span class="span1">A span element.</span>
<span class="span1">A span element.</span><br><br>
</div>
<script>
$(document).ready(function(){
$("#HH4").add(".p1").add(".span1").css("background-color", "yellow");
});
</script>
Syntax: $(selector).addback(selectElement)
The addBack() method adds the previous set of elements to the current set.
Parameters: none
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
</div>
<script>
$('li.third-item').nextAll().addBack()
.css('background-color', 'red');
</script>
Syntax: $(selector).children(filter)
The children() method returns all direct children of the selected element.
This method only traverse a single level down the DOM tree. To traverse down multiple levels (to return grandchildren or other descendants), use the find() method.
Tip: To traverse a single level up the DOM tree, or all the way up to the document's root element (to return parents or other ancestors), use the parent() or parents() method.
Note: This method does not return text nodes. To return all children including text nodes, use the contents() method.
Parameters:
filter : optional. Specifies a selector expression to narrow down the search for children.
<div class="descendants">
<div id="div1" style="width:30vw;">div (grandparent)
<ul>ul (direct parent)
<li>li (child)
<span>span (grandchild)</span>
</li>
</ul>
</div>
</div>
<style>
.descendants * { display: block; border: .2vw solid blue; color: black; padding: .5vw; margin: 1.5vw;}
</style>
<script>
$(document).ready(function(){
$("#div1 ul").children().css({"color": "red", "border": ".2vw solid red"});
});
</script>
Syntax: $(selector).closest(filter) or $(selector).closest(filter,context)
The closest() method returns the first ancestor of the selected element. An ancestor is a parent, grandparent, great-grandparent, and so on.
The DOM tree: this method traverse upwards from the current element, all the way up to the document's root element <html>, to find the first ancestor of DOM elements.
This method is similar to parents(), in that they both traverse up the DOM tree. The differences are as follows:
closest() : begins with the current element, travels up the DOM tree and returns the first (single) ancestor that matches the passed expression. The returned jQuery object contains zero or one element.
parents(): begins with the parent element, travels up the DOM tree and returns all ancestors that matches the passed expression. The returned jQuery object contains zero or more than one element.
Other related methods: parent() - returns the direct parent element of the selected element; parentsUntil() - returns all ancestor elements between two given arguments.
Parameters:
filter : required. Specifies a selector expression, element or jQuery object to narrow down the ancestor search
context : optional. A DOM element within which a matching element may be found.
<div class="ancestors">div(great-great-parent)
<div id="div2" style="width:30vw;">div (great parent)
<ul>ul (second ancestor - second grandparent)
<ul>ul (first ancestor - first grandparent)
<li>li (direct parent)
<span>span</span>
</li>
</ul>
</ul>
</div>
</div>
<style>
.ancestors * { display: block; border: .2vw solid blue; color: black; padding: .5vw; margin: 1.5vw;}
</style>
<script>
$(document).ready(function(){
$("#div2 span").closest("ul").css({"color": "red", "border": ".2vw solid red"});
});
</script>
Syntax: $(selector).contents()
The contents() method returns all direct children, including text and comment nodes, of the selected element. A text node is the actual text displayed by an element.
This method is similar to the children() method, except that it returns text and comment nodes as well. The contents() method can also access the HTML of an iframe, if it is in the same domain.
Parameters: none
In this example, by clicking on the button, we search for all the text nodes inside the div element and wrap them with a b element.
<div>
<div id="div3"><i>Hello world! What a beautiful day!</i></div>
<p>In this example, by clicking on the button, we search for all the text nodes inside the div element and wrap them with a b element.</p>
<button id="btn1">Find all text nodes in div and wrap them</button><br>
</div>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#div3").contents().filter("i").wrap("<b/>");
});
});
</script>
Syntax: $(selector).each(function(index,element))
The each() method specifies a function to run for each matched element.
Tip: "return false" can be used to stop the loop early.
Parameters:
function(index,element) : required. A function to run for each matched element. index - the index position of the selector; element - The current element (the "this" selector can also be used).
<div>
<button id="btn2">Alert the value of each list item</button>
<ul>
<li class="li1">Coffee</li>
<li class="li1" >Milk</li>
<li class="li1">Soda</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#btn2").click(function(){
$(".li1").each(function(){
alert($(this).text())
});
});
});
</script>
Syntax:: $(selector).end()
The end() method ends the most recent filtering operation in the current chain, and return the set of matched elements to its previous state
Parameters: none
<div>
<ul class="first">
<li class="foo">list item 1</li>
<li>list item 2</li>
<li class="bar">list item 3</li>
</ul>
<ul class="second">
<li class="foo">list item 1</li>
<li>list item 2</li>
<li class="bar">list item 3</li>
</ul>
</div>
<script>
$('ul.first').find('.foo').css('background-color', 'red')
.end().find('.bar').css('background-color', 'green');
</script>
Syntax: $(selector).eq(index)
The eq() method returns an element with a specific index number of the selected elements. The index numbers start at 0, so the first element will have the index number 0 (not 1).
Parameters:
index : required. Specifies the index of the element. Can either be a positive or negative number. Note: Using a negative number will start the index count from the end of the selected elements, instead of the beginning.
My name is Donald (index 0).
Donald Duck (index 1).
I live in Duckburg (index 2).
My best friend is Mickey (index 3).
<div id="divA">
<h4>Welcome to My Homepage</h4>
<p>My name is Donald (index 0).</p>
<p>Donald Duck (index 1).</p>
<p>I live in Duckburg (index 2).</p>
<p>My best friend is Mickey (index 3).</p>
</div>
<script>
$(document).ready(function(){
$("#divA p").eq(1).css("background-color", "yellow");
});
</script>
Syntax: $(selector).filter(criteria,function(index))
The filter() method returns elements that match a certain criteria. This method lets you specify a criteria. Elements that do not match the criteria are removed from the selection, and those that match will be returned.
This method is often used to narrow down the search for an element in a group of selected elements.
Tip: The filter() method is the opposite of the not() method.
Parameters:
criteria : optional. Specifies a selector expression, a jQuery object or one or more elements to be returned from a group of selected elements. To specify multiple criteria, use comma.
function(index) : optional. Specifies a function to run for each element in the set. If it returns true, the element is kept. Otherwise, the element is removed. "index" - the index position of the element in the set. Note: "this" is the current DOM element.
My name is Donald.
I live in Duckburg.
I love Duckburg.
My best friend is Mickey.
<div id="divB">
<h4>Welcome to My Homepage</h4>
<p>My name is Donald.</p>
<p class="intro">I live in Duckburg.</p>
<p class="intro">I love Duckburg.</p>
<p>My best friend is Mickey.</p>
</div>
<script>
$(document).ready(function(){
$("#divB p").filter(".intro").css("background-color", "yellow");
});
</script>
Syntax: $(selector).find(filter)
The find() method returns descendant elements of the selected element. A descendant is a child, grandchild, great-grandchild, and so on.
The DOM tree: this method traverse downwards along descendants of DOM elements, all the way down to the last descendant. To only traverse a single level down the DOM tree (to return direct children), use the children() method.
Note: the filter parameter is required for the find() method, unlike the rest of the tree traversal methods.
Tip: To return all of the descendant elements, use the "*" selector.
Parameters:
filter : required. A selector expression, element or jQuery object to filter the search for descendants. Note: To return multiple descendants, separate each expression with a comma.
<div class="ancestors1">div (great-grandparent)
<div style="width:500px;">div (grandparent)
<ul id="ulA">ul (direct parent)
<li>li (child)
<span>span (grandchild)</span>
</li>
</ul>
</div>
</div>
<style>
.ancestors1 * { display: block; border: .2vw solid magenta; color: blue;padding: .5vw; margin: 1.5vw;}
</style>
<script>
$(document).ready(function(){
$("#ulA").find("span").css({"color": "red", "border": "2px solid red"});
});
</script>
Syntax: $(selector).first()
The first() method returns the first element of the selected elements.
Tip: To return the last element, use the last() method.
Parameters: none
This is a paragraph in a div.
This is a paragraph in a div.
This is a paragraph in another div.
This is a paragraph in another div.
This is also a paragraph.
<div id="divC">
<h4>Welcome to My Homepage</h4>
<div style="border:1px solid black">
<p>This is a paragraph in a div.</p>
<p>This is a paragraph in a div.</p>
</div><br>
<div style="border:1px solid black">
<p>This is a paragraph in another div.</p>
<p>This is a paragraph in another div.</p>
</div>
<p>This is also a paragraph.</p>
</div>
<script>
$(document).ready(function(){
$("#divC div p").first().css("background-color", "yellow");
});
</script>
Syntax: $(selector).has(element)
The has() method returns all elements that have one or more elements inside of them, that matches the specified selector.
Tip: to select elements that have multiple elements inside of them, use comma.
Parameters: none
My name is Donald.
I live in Duckburg.
My best friend is Mickey.
<div id="divD">
<h4>Welcome to My Homepage</h4>
<p>My <span>name</span> is Donald.</p>
<p>I live in <span>Duckburg</span>.</p>
<p>My best friend is Mickey.</p>
</div>
<script>
$(document).ready(function(){
$("#divD p").has("span").css("background-color", "pink");
});
</script>
Syntax: $(selector).is(selectorElement,function(index,element))
The is() method checks if one of the selected elements matches the selectorElement.
Parameters:
selectorElement : required. Specifies a selector expression, element or a jQuery object to match the current set of elements against. Returns true if there is at least one match from the given argument, and false if not.
function(index,element) : optional. Specifies a function to run for the group of selected elements. "index" - the index position of the element; "element" - the current element (the "this" selector can also be used)
Click me to find out if I my parent is a div element.
<div id="divE">
<div>
<p>Click me to find out if I my parent is a div element.</p>
</div>
</div>
<script>
$(document).ready(function(){
$("#divE p").click(function(){
if ($("p").parent().is("div")) {
alert("Parent of p is div");
}
});
});
Syntax: $(selector).last()
The last() method returns the last element of the selected elements.
Tip: To return the first element, use the first() method.
Parameters: none
This is a paragraph in a div.
This is a paragraph in a div.
This is a paragraph in another div.
This is a paragraph in another div.
This is also a paragraph.
<div id="divC">
<h4>Welcome to My Homepage</h4>
<div style="border:1px solid black">
<p>This is a paragraph in a div.</p>
<p>This is a paragraph in a div.</p>
</div><br>
<div style="border:1px solid black">
<p>This is a paragraph in another div.</p>
<p>This is a paragraph in another div.</p>
</div>
<p>This is also a paragraph.</p>
</div>
<script>
$(document).ready(function(){
$("#divC div p").first().css("background-color", "yellow");
});
</script>
Syntax: $(seletor).map()
The map() method passes each element in the matched set through a function, producing a new jQuery object containing the return values.
Parameters: none
Values:
<div>
<form method="post" action="">
<fieldset>
<div>
<label for="two">2</label>
<input type="checkbox" value="2" id="two" name="number[]">
</div>
<div>
<label for="four">4</label>
<input type="checkbox" value="4" id="four" name="number[]">
</div>
<div>
<label for="six">6</label>
<input type="checkbox" value="6" id="six" name="number[]">
</div>
<div>
<label for="eight">8</label>
<input type="checkbox" value="8" id="eight" name="number[]">
</div>
</fieldset>
</form>
<p id="een"><b>Values: </b></p>
</div>
<script>
$("p#een").append($(':checkbox').map(function() {
return this.id;
}).get().join(','));
</script>
Syntax: $(selector).next(filter)
The next() method returns the next sibling element of the selected element. Sibling elements are elements that share the same parent.
The DOM tree: this method traverse forward along the next sibling of DOM elements.
Related methods: nextAll() - returns all next sibling elements of the selected element; nextUntil() - returns all next sibling elements between two given arguments.
Parameters:
filter : optional. Specifies a selector expression to narrow down the next sibling search.
<div id="divG">
<div style="width:30vw;" class="siblings">
<ul>ul (parent)
<li>li (sibling)</li>
<li>li (sibling)</li>
<li class="start">li (sibling with class name "start")</li>
<li>li (the next sibling of li with class name "start")</li>
<li>li (sibling)</li>
</ul>
</div>
</div>
<style>
.siblings * { display: block; border: .2vw solid burlywood;color: dodgerblue; padding: .5vw; margin: 1.5vw;}
</style>
<script>
$(document).ready(function(){
$("#divG li.start").next().css({"color": "red", "border": "2px solid red"});
});
</script>
Syntax: $(selector).nextAll(filter)
The nextAll() method returns all next sibling elements of the selected element. Sibling elements are elements that share the same parent.
The DOM tree: this method traverse forward along siblings of DOM elements.
Related methods: next() - returns the next sibling element of the selected element; nextUntil() - returns all next sibling elements between two given arguments.
Parameters:
filter : optional. Specifies a selector expression to narrow down the search for next siblings. To return multiple siblings, separate each expression with a comma.
<div id="divH">
<div style="width:30vw;" class="siblings1">
<ul>ul (parent)
<li>li (sibling)</li>
<li>li (sibling)</li>
<li class="start">li (sibling with class name "start")</li>
<li>li (the next sibling of li with class name "start")</li>
<li>li (the next sibling of li with class name "start")</li>
<li>li (the next sibling of li with class name "start")</li>
</ul>
</div>
</div>
<style>
.siblings1 * { display: block; border: .2vw solid aqua;color: skyblue; padding: .5vw; margin: 1.5vw;}
</style>
<script>
$(document).ready(function(){
$("#divH li.start").nextAll().css({"color": "red", "border": "2px solid red"});
});
</script>
Syntax: $(selector).nextUntil(stop,filter)
The nextUntil() method returns all next sibling elements between the selector and stop. Sibling elements are elements that share the same parent.
The DOM tree: this method traverse forward along siblings of DOM elements.
Note: If both parameters are empty, this method will return all next sibling elements (same as the nextAll() method).
Related methods: next() - returns the next sibling element of the selected element; nextAll() - returns all next sibling elements of the selected element.
Parameters:
stop : optional. A selector expression, element or jQuery object indicating where to stop the search for next matching siblings elements.
filter : optional. Specifies a selector expression to narrow down the search for sibling elementss between the selector and stop. To return multiple siblings, separate each expression with a comma.
<div id="divI">
<div style="width:30vw;" class="siblings2">
<ul>ul (parent)
<li>li (sibling)</li>
<li>li (sibling)</li>
<li class="start">li (sibling with class name "start")</li>
<li>li (the next sibling of li with class name "start")</li>
<li>li (the next sibling of li with class name "start")</li>
<li>li (the next sibling of li with class name "start")</li>
<li class="stop">li (sibling with class name "stop")</li>
</ul>
</div>
</div>
<style>
.siblings2 * { display: block; border: .2vw solid violet;color: dodgerblue; padding: .5vw; margin: 1.5vw;}
</style>
<script>
$(document).ready(function(){
$("#divI li.start").nextUntil("li.stop").css({"color": "red", "border": "2px solid red"});
});
</script>
Syntax: $(selector).not(criteria,function(index))
The not() method returns elements that do not match a certain criteria. This method lets you specify a criteria. Elements that do not match the criteria are returned from the selection, and those that match will be removed. This method is often used to remove one or more elements from a group of selected elements.
Tip: The not() method is the opposite of the filter() method.
Parameters:
criteria : optional. Specifies a selector expression, a jQuery object or one or more elements to be removed from a group of selected elements.Tip: To specify multiple criteria, use comma.
function(index) : optional. Specifies a function to run for each element in a group. If it returns true, the element is removed. Otherwise, the element is kept.
My name is Donald.
I live in Duckburg.
I love Duckburg.
My best friend is Mickey.
<div id="divJ">
<h4>Welcome to My Homepage</h4>
<p>My name is Donald.</p>
<p class="intro">I live in Duckburg.</p>
<p class="intro">I love Duckburg.</p>
<p>My best friend is Mickey.</p>
</div>
<script>
$(document).ready(function(){
$("#divJ p").not(".intro").css("background-color", "skyblue");
});
</script>
Syntax: $(selector).offsetParent()
The offsetParent() method returns the first positioned parent element.
Tip: an element can be positioned with jQuery, or with the CSS position property (relative, absolute, or fixed).
Parameters: none
Click button to set the background color of the first positioned parent element of this paragraph.
<div id="divK">
<button id="but">Set background-color</button>
<div style="border:0.1vw solid black;width:80%;position:relative;left:1vw;top:1vw">
<div style="border:0.1vw solid black;margin:5vw;background-color:yellow">
<p id="p_1">Click button to set the background color of the first positioned parent
element of this paragraph.</p>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#but").click(function(){
$("#p_1").offsetParent().css("background-color", "red");
});
});
</script>
Syntax: $(selector).parent(filter)
The parent() method returns the direct parent element of the selected element.
The DOM tree: this method only traverse a single level up the DOM tree. To traverse all the way up to the document's root element (to return grandparents or other ancestors), use the parents() or the parentsUntil() method.
Tip: To traverse a single level down the DOM tree, or all the way down to the last descendant (to return children or other descendants), use the children() or find() method.
Parameters:
filter : optional. Specifies a selector expression to narrow down the parent search.
<div class="ancestors_A">div (great-great-parent)
<div id="div8" style="width:30vw;">div (great parent)
<ul>ul (grandparent)
<li>li (direct parent)
<span id="span_A">span</span>
</li>
</ul>
</div>
</div>
<style>
.ancestors_A * { display: block; border: .2vw solid blue; color: black; padding: .5vw; margin: 1.5vw;}
</style>
<script>
$(document).ready(function(){
$("#span_A").parent().css({"color": "dodgerblue", "border": ".2vw solid burlywood"});
});
</script>
Syntax: $(selector).parents(filter)
The parents() method returns the all ancestors elements of the selected element.
The DOM tree: this method traverse upwards from the parent element along ancestors of DOM elementss, all the way up to the document's root element (<html>).
Note: If the filter parameter is empty, this function will select all ancestors of a set of elements, from the direct parent and all the way up to <body> and <html>. It is therefore often useful to pass a selector expression to narrow down the search result.
This method is similar to closest(), in that they both traverse up the DOM tree. The differences are as follows:
closest() : begins with the current element, travels up the DOM tree and returns the first (single) ancestor that matches the passed expression. The returned jQuery object contains zero or one element.
parents(): begins with the parent element, travels up the DOM tree and returns all ancestors that matches the passed expression. The returned jQuery object contains zero or more than one element.
Other related methods: parent() - returns the direct parent element of the selected element; parentsUntil() - returns all ancestor elements between two given arguments.
Parameters:
filter : optional. Specifies a selector expression to narrow down the search for ancestors. Note: To return multiple ancestors, separate each expression with a comma.
<div class="ancestors_B">div (great-great-parent)
<div id="div9" style="width:30vw;">div (great parent)
<ul>ul (grandparent)
<li>li (direct parent)
<span id="span_B">span</span>
</li>
</ul>
</div>
</div>
<style>
.ancestors_B * { display: block; border: .2vw solid blue; color: black; padding: .5vw; margin: 1.5vw;}
</style>
<script>
$(document).ready(function(){
$("#span_B").parents(".ancestors_B").css({"color": "dodgerblue", "border": ".2vw solid burlywood"});
});
</script>
Syntax: $(selector).parentsUntil(stop, filter)
The parentsUntil() method returns all ancestors elements betweenthe selector and stop.
The DOM tree: this method traverse upwards from the parent element along ancestors of DOM elements, all the way up to the document's root element, until it reaches a speific element.
Note: If both parameters are empty, tthis method will return all ancestor elements (same as the parents() method)
Related methods: parent() - returns the direct parent element of the selected element; parents() - returns all ancestor elements of the selected element. closest - returns the first ancestor of the selected element.
Parameters:
stop : optional. A selector expression, element or jQuery object indicating where to stop the search for matching ancestor elements.
filter : optional. Specifies a selector expression to narrow down the search for ancestors between selector ad stop. Note: To return multiple ancestors, separate each expression with a comma.
<div class="ancestors_C">div (great-great-parent)
<div id="div10" style="width:30vw;">div (great parent)
<ul>ul (grandparent)
<li>li (direct parent)
<span id="span_C">span</span>
</li>
</ul>
</div>
</div>
<style>
.ancestors_C * { display: block; border: .2vw solid blue; color: black; padding: .5vw; margin: 1.5vw;}
</style>
<script>
$(document).ready(function(){
$("#span_C").parentsUntil("div").css({"color": "dodgerblue", "border": ".2vw solid burlywood"});
});
</script>
Syntax: $(selector).prev(filter)
The prev() method returns the previous sibling element of the selected element. Sibling elements are elements that share the same parent.
The DOM tree: this method traverse backwards along the previous sibling of DOM elements.
Related methods: prevAll() - returns all previous sibling elements of the selected element; prevUntil() - returns all previous sibling elements between two given arguments
Parameters:
filter : optional. Specifies a selector expression to narrow down the previous sibling search.
<div id="div_AA">
<div style="width:30vw;" class="siblings_AA">
<ul>ul (parent)
<li>li (sibling)</li>
<li>li (the previous sibling of li with class name "start")</li>
<li class="start">li (sibling with class name "start")</li>
<li>li (sibling)</li>
<li>li (sibling)</li>
</ul>
</div>
</div>
<style>
.siblings_AA * { display: block; border: .2vw solid blue; color: black; padding: .5vw; margin: 1.5vw;}
</style>
<script>
$(document).ready(function(){
$(".siblings_AA li.start").prev().css({"color": "red", "border": "2px solid red"});
});
</script>
Syntax: $(selector).prevAll(filter)
The The prevAll() method returns all previous sibling elements of the selected element. Sibling elements are elements that share the same parent.
The DOM tree: this method traverse backwards along siblings of DOM elements.
Related methods: prev() - returns the next sibling element of the selected element; prevUntil() - returns all next sibling elements between two given arguments
Parameters:
filter : optional. Specifies a selector expression to narrow down the search for previous siblings. Note: to return multiple siblings, separate each expression with a comma.
<div style="width:30vw;" class="siblings_BB">
<ul>ul (parent)
<li>li (the previous sibling of li with class name "start")</li>
<li>li (the previous sibling of li with class name "start")</li>
<li>li (the previous sibling of li with class name "start")</li>
<li class="start">li (sibling with class name "start")</li>
<li>li (sibling)</li>
<li>li (sibling)</li>
</ul>
</div>
</div>
<style>
.siblings_BB * { display: block; border: .2vw solid blue; color: black; padding: .5vw; margin: 1.5vw;}
</style>
<script>
$(document).ready(function(){
$(".siblings_BB li.start").prevAll().css({"color": "red", "border": "2px solid red"});
});
</script>
Syntax: $(selector).prevUntil(stop,filter)
The prevUntil() method returns all previous sibling elements between the selector and stop. Sibling elements are elements that share the same parent.
The DOM tree: this method traverse backwards along siblings of DOM elements.
Note: If both parameters are empty, this method will return all previous sibling elements (same as the prevAll() method).
Related methods: prev() - returns the previous sibling element of the selected element; prevAll() - returns all previous sibling elements of the selected element.
Parameters:
stop : optional. A selector expression, element or jQuery object indicating where to stop the search for previous matching siblings elements.
filter : optional. Specifies a selector expression to narrow down the search for sibling elements between the selector and stop. Note: to return multiple siblings, separate each expression with a comma.
<div>
<div style="width:500px;" class="siblings_CC">
<ul>ul (parent)
<li class="stop">li (sibling with class name "stop")</li>
<li>li (the previous sibling of li with class name "start")</li>
<li>li (the previous sibling of li with class name "start")</li>
<li>li (the previous sibling of li with class name "start")</li>
<li class="start">li (sibling with class name "start")</li>
<li>li (sibling)</li>
<li>li (sibling)</li>
</ul>
</div>
</div>
<style>
.siblings_CC * { display: block; border: .2vw solid blue; color: black; padding: .5vw; margin: 1.5vw;}
</style>
<script>
$(document).ready(function(){
$(".siblings_CC li.start").prevUntil("li.stop").css({"color": "red", "border": "2px solid red"});
});
</script>
Syntax: $(selector).siblings(filter)
The siblings() method returns all sibling elements of the selected element. Sibling elements are elements that share the same parent.
The DOM tree: this method traverse forward and backwards along siblings of DOM elements.
Tip: use the prev() or next() method to narrow down the search for only previous or next sibling elements..
Parameters:
filter : optional. Specifies a selector expression to narrow down the search for sibling elements.
<div>
<div style="width:30vw;" class="siblings_DD">
<ul>ul (parent)
<li>li (the previous sibling of "start")</li>
<li>li (the previous sibling of "start")</li>
<li class="start">li (sibling)</li>
<li>li (the next sibling of "start")</li>
<li>li (the next sibling of "start")</li>
</ul>
</div>
</div>
<style>
.siblings_DD * { display: block; border: .2vw solid blue; color: black; padding: .5vw; margin: 1.5vw;}
</style>
<script>
$(document).ready(function(){
$(".siblings_DD li.start").siblings().css({"color": "red", "border": "2px solid red"});
});
</script>
Syntax: $(selector).slice(start,stop)
The slice() method selects a subset of elements based on its index. A subset is a set that is a part of a larger set. This method is used to limit the selection of elements in a group, by a start and end point: the start parameter is a starting index (starts at 0) from which to create the subset, and the stop parameter is an optional ending point.
Parameters:
start : required. Specifies where to start the selection of elements. The index numbers start at 0. Note: using a negative number will select elements from the end of the selected elements, instead of the beginning.
stop : optional. Specifies where to end the selection of elements. If omitted, the selection continues until the end of the set. The index numbers start at 0. Note: using a negative number will select elements from the end of the selected elements, instead of the beginning.
My name is Donald (index 0).
Donald Duck (index 1).
I live in Duckburg (index 2).
My best friend is Mickey (index 3).
<div id="finalDiv">
<h4>Welcome to My Homepage</h4>
<p>My name is Donald (index 0).</p>
<p>Donald Duck (index 1).</p>
<p>I live in Duckburg (index 2).</p>
<p>My best friend is Mickey (index 3).</p>
</div>
<script>
$(document).ready(function(){
$("#finalDiv p").slice(2).css("background-color", "yellow");
});
</script>